<template>
	<div class="chat-wrap">
		<header-nav></header-nav>
		<p class="chat-welcome tc mt3 mb3">敌军还要5秒到达战场</p>
		<!--chat-->
		<div class="chat-main clearfix" id="chatmain">
			<div class="chat-server pt3 pb3">
				<div class="chat-stx"></div>
				<div class="chat-stext">
					<div class="stext-show">您好，傻吊，有什么能帮助您的吗？</div>
				</div>
			</div>
			<div class="chat-client pt3 pb3">
				<div class="chat-ctext">
					<div class="ctext-show">早上好！</div>
				</div>
				<div class="chat-ctx"></div>
			</div>
			<div class="chat-server pt3 pb3">
				<div class="chat-stx"></div>
				<div class="chat-stext">
					<div class="stext-show">早你妹，都中午了，不看时间的嘛，</div>
				</div>
			</div>
		</div>
		<!--chat-->
		<div class="bot-fix">
			<div class="bot-wtop clearfix">
				<input type="text" class="chat-inp" v-model="msg" />
				<div class="chat-sendbtn" v-on:click="sendbtn"><button>发送</button></div>
			</div>
		</div>
	</div>
</template>

<script>
	import HeaderNav from '../../components/header.vue'
	import axios from 'axios'
	export default{
		components : {
			HeaderNav
		},
		data(){
			return{
				'msg':'',
				'backinfo':''
			}
		},
		mounted: function() {
		    document.getElementsByTagName("body")[0].className="bgchat"; 
		},
		methods:{
			sendbtn(){
				if( this.msg == '' ){
					alert("请输入你要发送的内容")
					return
				}
				let chtml = document.createElement("div");
				let url = '/api/60-27';
				let sign = 'bc41dbe15d504543b791fe0cc5a80e50';
				chtml.className = "chat-client pt3 pb3";
				chtml.innerHTML = '<div class="chat-ctext"><div class="ctext-show">' + this.msg + '</div></div><div class="chat-ctx"></div>';
				document.getElementById('chatmain').appendChild(chtml)
				
				axios({
					method: 'post',
					url: url,
					params: {
						'showapi_appid':'54164',
				    	'showapi_sign':sign,
				    	'info':this.msg
					}
				}).then((res) => {
					this.msg = ''
					console.log(res.data.showapi_res_body.text)
					this.backinfo = res.data.showapi_res_body.text
					
					let shtml = document.createElement("div");
					shtml.className = "chat-server pt3 pb3";
					shtml.innerHTML = '<div class="chat-stx"></div><div class="chat-stext"><div class="stext-show">' + this.backinfo + '</div></div>';
					document.getElementById('chatmain').appendChild(shtml)
					document.documentElement.scrollTop = document.getElementById('chatmain').scrollHeight;
				})
				
			}
		},
		beforeDestroy () {
		    document.getElementsByTagName("body")[0].className="";
		}
	}
</script>

<style scoped>
</style>